<template>
  <div class="page">
    <div class="item">
      <div class="item-title">本地存储：</div>
      <div class="item-body">
        <li>
          <span class="item-btn" @click="saveData()">保存数据</span>
        </li>
        <li>
          <span class="item-btn" @click="getData()">获取数据</span>
        </li>
        <li>
          <span class="item-btn" @click="hasData()">key存在判断</span>
        </li>
        <li>
          <span class="item-btn" @click="removeData()">清除指定key</span>
        </li>
        <li>
          <span class="item-btn" @click="clearData()">清除全部key</span>
        </li>
      </div>
    </div>
    <div class="item">
      <div class="item-title">会话存储：</div>
      <div class="item-body">
        <li>
          <span class="item-btn" @click="savesData()">保存数据</span>
        </li>
        <li>
          <span class="item-btn" @click="getsData()">获取数据</span>
        </li>
        <li>
          <span class="item-btn" @click="hassData()">key存在判断</span>
        </li>
        <li>
          <span class="item-btn" @click="removesData()">清除指定key</span>
        </li>
        <li>
          <span class="item-btn" @click="clearsData()">清除全部key</span>
        </li>
      </div>
    </div>
    <div class="item">
      <div class="item-title">请求：</div>
      <div class="item-body">
        <li>
          <span class="item-btn" @click="getRe()">get测试</span>
        </li>
        <li>
          <span class="item-btn" @click="postRe()">post测试</span>
        </li>
        <li>
          <span class="item-btn" @click="login()">登录</span>
        </li>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  
  defineComponent,
  onMounted,
  getCurrentInstance,
} from "vue";
import { useStore } from "vuex";
import {useRouter} from 'vue-router'

const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http } = globalProperties;
const store = useStore();
const router = useRouter();
onMounted(() => {
  $http.post("/home/login/aa");
});

const getRe = async () => {
  let res = await $http.get( "/home/login/aa?a=1");
};
const postRe = () => {
  $http
    .post("/home/login/aa?uu=1",
      {
        jj: 1,
        ddd: 11,
        list: [1, 2],
      },
    )
    .then((res) => {
      console.log(res);
    });
};
const login = () => {

 
};
const saveData = () => {
  $storage.local.set($storage.events.test, " 111");
};
const getData = () => {
  let data = $storage.local.get($storage.events.test);
  console.log(data);
};
const hasData = () => {
  let data = $storage.local.has($storage.events.test);
  console.log(data);
};
const removeData = () => {
  $storage.local.remove($storage.events.test);
};
const clearData = () => {
  $storage.local.remove($storage.events.test);
};

const savesData = () => {
  $storage.session.set($storage.events.test, " 111");
};
const getsData = () => {
  let data = $storage.session.get($storage.events.test);
  console.log(data);
};
const hassData = () => {
  let data = $storage.session.has($storage.events.test);
  console.log(data);
};
const removesData = () => {
  $storage.session.remove($storage.events.test);
};
const clearsData = () => {
  $storage.session.remove($storage.events.test);
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
}
.item {
  .item-title {
  }
  .item-body {
    li {
      padding: 4px;
      .item-btn {
        padding: 4px 20px;
        color: #fff;
        background-color: green;
      }
    }
  }
}
</style>
